<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Test List - Metro 4 :: Popular HTML, CSS and JS library</title>

</head>
<body class="m4-cloak">
<div class="container">
    <h1>List test page</h1>

    <div class="example">
        <div>
            <button class="button" onclick="setData()">Set Data</button>
        </div>
        <div id="paintings"
            data-role="list"
            data-sort-class="painting-price"
            data-filter-class="painting-author"
            data-sort-dir="desc"
            data-cls-list="grid mt-4"
            data-cls-list-item="row"
            data-item-tag="div"
            data-cls-template-tag="cell-md-5, cell-md-3, cell-md-2"
        >
        </div>
    </div>

</div>

<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
    function setData(){
        var list = Metro.getPlugin("#paintings", "list")
        list.setData({
            "header": {
            },
            "data": [
                {
                    "img_src": "//metroui.org.ua/images/paintings/picasso.jpg",
                    "painting_name": "Nude, green leaves and bust",
                    "painting_author": "Picasso",
                    "painting_price": "$ 106M"
                },
                {
                    "img_src": "//metroui.org.ua/images/paintings/munk.jpg",
                    "painting_name": "The Scream",
                    "painting_author": "Munk",
                    "painting_price": "$ 119M"
                },
                {
                    "img_src": "//metroui.org.ua/images/paintings/klimt.jpg",
                    "painting_name": "Gold Adele",
                    "painting_author": "Klimt",
                    "painting_price": "$ 135M"
                },
                {
                    "img_src": "//metroui.org.ua/images/paintings/kuning.jpg",
                    "painting_name": "Woman III",
                    "painting_author": "Kuning",
                    "painting_price": "$ 135M"
                },
                {
                    "img_src": "//metroui.org.ua/images/paintings/sezann.jpg",
                    "painting_name": "Players in cards",
                    "painting_author": "Sezann",
                    "painting_price": "$ 250M"
                },
                {
                    "img_src": "//metroui.org.ua/images/paintings/gogen.jpg",
                    "painting_name": "When is the wedding",
                    "painting_author": "Gogen",
                    "painting_price": "$ 300M"
                },
                {
                    "img_src": "//metroui.org.ua/images/paintings/bacon.jpg",
                    "painting_name": "Three Studies of Lucian Freud",
                    "painting_author": "Bacon",
                    "painting_price": "$ 142M"
                }
            ]
        })
    }
</script>
</body>
</html>
